<template>
  <div id="app">
    <router-view />
    <van-popup
      closeable
      close-icon="close"
      @close="close"
      v-model="show"
      :close-on-click-overlay="false"
      round
      position="bottom"
      :style="{ height: '30%', paddingTop: '30px' }"
    >
      <van-form @submit="onSubmit" label-align="right">
        <van-field
          v-model="form.phone"
          name="form.phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field
          name="form.code"
          v-model="form.code"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <span
              size="small"
              type="primary"
              v-show="showCodeButton"
              class="get-captcha"
              @click="getCode()"
              >发送验证码</span
            >
            <span v-show="!showCodeButton" class="get-captcha"
              >发送中{{ time }}</span
            >
          </template>
        </van-field>
        <!-- <div class="loginBtn" @click="onSubmit">登录</div> -->
        <div style="margin: 40px">
          <van-button
            color="#0050A5"
            class="reg-box-btn"
            round
            block
            type="info"
            native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import { wxAuthorize } from "@/utils/wxAuthorize.js";
import { getQueryString } from "@/utils/wxLogin.js";
export default {
  name: "app",
  data() {
    return {
      show: false,
      form: {},
      codeImg: "",
      active: "",
      time: 60,
      showCodeButton: true,
    };
  },
  watch: {
    $route: function (to, from) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
  },
  mounted() {
    const ua = window.navigator.userAgent.toLowerCase();
    console.log(ua);
    // 是否是在微信中打开
    if (ua.indexOf("micromessenger") != -1) {
      this.loginWX("/weChat/weChatLoginMobile");
    } else {
      // this.loginWX('/weChat/weChatLoginPc')
    }
  },
  methods: {
    loginWX(url) {
      let code = getQueryString("code");
      console.log(code, "返回首页,拿去code");
      if (code) {
        this.$request({
          url,
          data: {
            code,
          },
          method: "post",
        }).then((rsp) => {
          if (rsp.code === 200) {
            this.$store.dispatch("setUserInfo", rsp.data);
            if (!rsp.data.phone) {
              this.show = true;
              this.$toast.fail("您尚未绑定手机号,请绑定手机号");
            }
          } else {
            this.$toast.fail(rsp.content);
          }
        });
      }
    },
    newLacation() {
      let str = window.location.href.split("#")[0];
      let index = str.lastIndexOf("?");
      str = str.substring(0, index);
      window.location.href = str;
    },
    close() {
      console.log("走了吗?");
      this.newLacation();
      this.$store.dispatch("setUserInfo", "");
    },
    onSubmit() {
      this.form.channelType = 2;
      this.$request({
        url: "/admin/sysUser/bandPhone",
        data: this.form,
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          // this.$sessionStorage.set("userInfo", rsp.data);
          this.newLacation();
          this.$store.dispatch("setUserInfo", rsp.data);
          this.$router.push({ path: "/" });
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    countdown() {
      if (!this.showCodeButton) {
        if (this.time > 0) {
          setTimeout(() => {
            this.time--;
            this.countdown();
          }, 1000);
        } else {
          this.showCodeButton = true;
          this.time = 60;
        }
      }
    },
    getCode() {
      if (!this.form.phone) {
        this.$toast.fail("请填写手机号!");
        return false;
      }
      this.form.timestamp = new Date().getTime();
      this.$request({
        url: "/code/shortMessage",
        data: {
          phoneNumber: this.form.phone,
          timestamp: this.form.timestamp,
        },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.showCodeButton = false;
          this.countdown();
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
  },
};
</script>
<style lang="scss">
@import "assets/css/base";
.v-html-img img {
  max-width: 100% !important;
}
.get-captcha {
  color: #0050a5;
}
</style>
